<template>
  <div>
    <el-dialog
      class="employee-dialog-container"
      :title="isEdit?'修改员工':'添加员工'"
      :visible.sync="dialogVisible"
      width="400px"
      :before-close="dialogBeforeClose"
    >
      <el-form ref="employeeData" status-icon :model="employeeData" validate-on-rule-change :rules="rules" label-position="right">
        <el-form-item label="账号" prop="username" label-width="50">
          <el-input v-model="employeeData.username" />
        </el-form-item>
        <el-form-item label="姓名" prop="name" label-width="100">
          <el-input v-model="employeeData.name" />
        </el-form-item>
        <!-- <el-form-item v-if="isEdit" label="账户" label-width="100">
          <el-input v-model="employeeData.account" :disabled="isEdit" />
        </el-form-item> -->
        <el-form-item label="手机号" prop="phone" label-width="100">
          <el-input v-model="employeeData.phone" />
        </el-form-item>
        <el-form-item label="性别" label-width="100">
          <el-radio v-model="employeeData.sex" label="1">男</el-radio>
          <el-radio v-model="employeeData.sex" label="0">女</el-radio>
        </el-form-item>
        <el-form-item label="身份证号" prop="idNumber" label-width="100">
          <el-input v-model="employeeData.idNumber" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogBeforeClose">取 消</el-button>
        <el-button type="primary" @click="submitData('employeeData')">保存</el-button>
        <el-button v-show="!isEdit" type="primary" @click="batchSubmitData('employeeData')">保存并继续添加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deepClone } from '@/utils/myUtil.js'
import { isPhone, validMyUsername, validId, validName } from '@/utils/validate'
import { addEmployee, editEmployee } from '@/api/employee'
import { EventBus } from '@/utils/eventBus'
import { queryEmployeeById } from '@/api/user'
export default {
  name: 'EmployeeDialog',
  props: {
    employeeId: {
      type: String,
      require: false,
      default: ''
    },
    isEdit: {
      type: Boolean,
      require: true,
      default: false
    },
    show: {
      type: Boolean,
      require: true,
      default: true
    }
  },
  data() {
    const validPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入手机号'))
      }
      if (isPhone) {
        callback()
      } else {
        callback(new Error('手机号格式不正确'))
      }
    }
    return {
      totalData: [],
      employeeData: {
        name: '',
        username: '',
        idNumber: '',
        phone: '',
        sex: '1'
      },
      rules: {
        username: { validator: validMyUsername, trigger: blur },
        name: { validator: validName, trigger: blur },
        phone: { validator: validPhone, trigger: blur },
        idNumber: { validator: validId, trigger: blur }
      }
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  async created() {
    console.log(this.show, this.dialogVisible)
    if (this.isEdit) {
      const { data } = await queryEmployeeById(this.employeeId)
      this.employeeData = deepClone(data)
    }
  },
  methods: {
    async handleSubmitAdd() {
      const res = await addEmployee(this.employeeData)
      if (res.code) {
        this.$message.success('添加成功')
      }
    },
    batchSubmitData(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.handleSubmitAdd()
          this.$refs[formName].resetFields()
        }
      })
    },
    dialogBeforeClose() {
      this.dialogVisible = false
    },
    submitData(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
          if (this.isEdit) {
            const { code } = await editEmployee(this.employeeData)
            if (code) {
              this.$message.success('修改成功')
              EventBus.$emit('refetchEmployeeData')
              this.dialogBeforeClose()
            }
          } else {
            this.handleSubmitAdd()
            this.dialogBeforeClose()
            this.$refs[formName].resetFields()
            EventBus.$emit('refetchEmployeeData')
          }
        } else {
          return false
        }
      })
    }
    // 111999999999999999 17263598771
  }
}
</script>

<style lang='scss'>
.employee-dialog-container{
  .el-radio-group{
    margin-left: 40px ;
  }
  .el-form-item{
    margin-bottom: 20px;
    display: flex;

    .el-form-item__label{
      width: 120px;
      padding: 0 40px 0 0
    }
    .el-form-item__content{
      width: 220px;
    }
  }
}
</style>
